<template>
	<div>
		<mt-swipe :auto="4000">
			<!-- 在组件中使用 v-for循环的话 一定要使用key -->
			<!-- 将来, 谁使用此轮播图组件, 谁为我们传递lunbotuList  -->
			<!-- 此时 lunbotuList应通过父组件向子组件传值来设置 -->
  			<mt-swipe-item v-for="item in lunbotuList" :key="item.url"><img :src="item.img" alt="" :class="{ full:isFull }"></mt-swipe-item>
		</mt-swipe>
	</div>
	<!-- 分析：为什么商品评论中的轮播图那么丑 -->
	<!-- 1. 首页中的图片, 它的宽和高, 都是使用了100%的高度 -->
	<!-- 2. 在商品详情页面中, 轮播图的图片, 如果也使用宽度为100%的话, 就会变得不好看 -->
	<!-- 3. 在商品详情页面中的轮播图, 期望高度是100%， 宽度为自适应-->
	<!-- 4. 经过分析, 得到问题的原因： 首页中的轮播图和详情中的轮播图, 分歧点是宽度到底是100%还是自适应 -->
	<!-- 5. 既然这两个轮播图, 其他方面都是没有冲突的, 只是宽度有分歧, 那么我们可以定义一个属性，
	让使用轮播图的调用者, 手动指定是否为100%的宽度 -->
</template>

<script>
	export default {
		props: ["lunbotuList", "isFull"]
	}

</script>

<style lang="scss" scoped>
	.mint-swipe{
		/*图片居中对齐*/
		text-align: center;
		height: 200px;
		.mint-swipe-item{
			img{
				/*width: 100%;*/
				height: 100%;
			}
		}
	}
	.full{
		width:100%;
	}
</style>

<!-- 在Vue中使用样式 -->
<!-- 使用class类样式 -->

<!-- 1. 数组 -->
<!-- <h1 :class="['red','thin']">下雨天</h1> -->

<!-- 2.数组中使用三元表达式 -->
<!-- <h1 :class="['red','thin', isactive ? 'active' : '']"></h1> -->

<!-- 3.数组中嵌套对象 -->
<!-- <h1 :class="['red','thin', {'active': isactive}]"></h1> -->

<!-- 4.直接使用对象 -->
<!-- 对象中的属性名是类名  属性值是布尔值 如果布尔值为true,代表要为这个元素加上这个类名 -->
<!-- <h1 :class="{red:true, italic:true, active:true, thin:true}"></h1> -->